<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改点位</title>
    <style>
        .wu-inline>.form-group{
            margin-right:0;
            margin-left:0;
        }
    </style>
</head>
<body>
<div class="pos-r">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 自动洗车
        <span class="c-gray en">&gt;</span>
        点位管理
        <span class="c-gray en">&gt;</span>
        修改点位
    </nav>
    <div style="margin-right:22%">
        <div class="page-container">
            <form action="" method="post" class="form form-horizontal" id="auto-form-member-edit">
                <input type="text" class="form-control" value="" style="display: none;" id="auto-edit-shopId" name="shopId">
                <div class="form-unit">基本信息</div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位名称：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-edit-shopName" name="shopName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位编号：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-edit-shopNo" name="shopNo">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位地址：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-edit-shopAddr" name="shopAddr">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位电话1：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-edit-shopPhone1" name="shopPhone1">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位电话2：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="" id="auto-edit-shopPhone2" name="shopPhone2">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位电话3：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="" id="auto-edit-shopPhone3" name="shopPhone3">
                    </div>
                </div>
                <div class="form-unit">配置信息</div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>获取经纬度：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="form-inline wu-inline">
                            <button type="button" class="btn btn-primary" id="showEditMap"  data-toggle="modal" data-target=".modal-map-edit">显示地图</button>
                            <div class="form-group">
                                <input type="text" class="form-control" value="" placeholder="必填项" id="auto-edit-longitude" name="longitude">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" value="" placeholder="必填项" id="auto-edit-latitude" name="latitude">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-unit">其他信息</div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3">点位描述：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <textarea id="auto-edit-shopDesc" name="shopDesc" cols="60" rows="5" class="textarea valid" placeholder="请输入点位的描述..."></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3">图片上传：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <div class="uploader-list-container">
                            <input id="editAutoImg" name="file[]" multiple type="file" class="file-loading"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input onclick="merchantAutoManageEditFun.submitAction();return false;" class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"/>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--地图模态框-->
<div class="modal fade modal-map-edit" tabindex="-1" role="dialog" id="mapAutoModalLabelEdit">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <input type="text" id="wordAutoEdit">
            <button id="searchWordAutoEdit">搜索</button>
            <div id="wuTestAutoMapEdit" style="min-height: 700px;width: 100%"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //点位管理，添加服务
    var merchantAutoManageEditFun;

    merchantAutoManageEditFun = {
        map : new BMap.Map("wuTestAutoMapEdit"),
        init: function () {
            let _this = this;
            var shopId = sessionStorage.getItem("manage-shopId");
            _this.modify(shopId);
            _this.bootstrapvalidatorForm();
            _this.loadMap();
        },
        loadMap : function () {
            /*******************加载地图**********/
            let _this = this;
            _this.map.centerAndZoom("南京",13);
            _this.map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            _this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            //单击获取点击的经纬度
            _this.loadPoint($("#store-edit-longitude").val(),$("#store-edit-latitude").val());
            var local = new BMap.LocalSearch( _this.map, {
                renderOptions:{map:   _this.map}
            });
            $('#searchWordAutoEdit').on('click',function(){
                var val = $('#wordAutoEdit').val();
                local.search(val);
            })
            _this.map.addEventListener("click",function(e){
                _this.map.clearOverlays();
                $("#store-edit-longitude").val(e.point.lng);
                $("#store-edit-latitude").val(e.point.lat);
                _this.loadPoint(e.point.lng,e.point.lat);
                $('#mapAutoModalLabelEdit').modal('hide');
            });
        },
        loadPoint : function (lng,lat) {
            let _this = this;
            var point = new BMap.Point(lng,lat);
            _this.map.centerAndZoom(point, 13);
            var marker = new BMap.Marker(point);  // 创建标注
            _this.map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        },
        modify: function (index) {
            var _this = this;
            $.ajax({
                type: "get",
                url: "biz/getShopByShopId",
                async: false,
                data: {shopId: index},
                dataType: "json",
                success: function (result) {
                    if (result.state) {
                        var data = result.data;
                        $("#auto-edit-shopName").val(data.shopName);
                        $("#auto-edit-shopNo").val(data.shopNo);
                        $("#auto-edit-shopAddr").val(data.shopAddr);
                        $("#auto-edit-shopPhone1").val(data.shopPhone1);
                        $("#auto-edit-shopPhone2").val(data.shopPhone2);
                        $("#auto-edit-shopPhone3").val(data.shopPhone3);
                        $("#auto-edit-startTime").val(data.startTime);
                        $("#auto-edit-endTime").val(data.endTime);
                        $("#auto-edit-longitude").val(data.longitude);
                        $("#auto-edit-latitude").val(data.latitude);
                        $("#auto-edit-shopDesc").val(data.shopDesc);
                        $("#auto-edit-shopId").val(data.shopId);
                        var biz_type = data.bizType;
                        $("#edit-type-" + (biz_type + 1)).prop("checked", true);
                        var state = data.bizState;
                        $("#edit-state-" + (state + 1)).prop("checked", true);
                        var ddd = $("#edit-sysUserIds").select2();    //获取selectid
                        ddd.val(data.sysUserId).trigger("change");    //设置 value 为four的 option 为选中状态
                        var ddds = $("#edit-roleIds").select2();    //获取selectid
                        ddds.val(data.roleId).trigger("change");    //设置 value 为four的 option 为选中状态

                        var resList = data.imgList;
                        if (resList != null) {
                            var urlList = [];
                            for (var i = 0; i < resList.length; i++) {
                                urlList.push("files"+resList[i]["url"]);
                            }
                            $("#editAutoImg").fileinput({
                                language: "zh", //设置语言
                                uploadUrl: "file/upload", //上传的地址
                                allowedFileExtensions: ["jpg", "png", "gif"],//接收的文件后缀
                                maxFileCount: 5,
                                showUpload: false,//是否显示上传按钮
                                showRemove: false,//是否显示删除按钮
                                showCaption: true,//是否显示输入框
                                browseClass: "btn btn-primary", //按钮样式
                                enctype: "multipart/form-data",
                                showPreview: true,
                                uploadAsync: false,//多图片一次上传
                                maxSize: 1024,//单位kb
                                allowedPreviewTypes: ["image"],
                                uploadExtraData: function () {
                                    return extData;
                                },
                                initialPreview: urlList,
                                initialPreviewAsData: true,
                                //deleteUrl: "file/upload",
                                overwriteInitial: false,
                                maxFileSize: 100
                            }).on("change", function (event) {
                                isChange = true;
                            });
                        }

                    }
                    else {
                        alert(result.message);
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //表单提交
        submitAction: function () {
            //bootstrap验证
            var bootstrapValidator = $("#auto-form-member-edit").data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid())
                $("#auto-form-member-edit").submit();
            else return;
            //提交
            $.ajax({
                type: "GET",
                url: "biz/modifyAutoWash",
                data: $("#auto-form-member-edit").serialize(),
                dataType: "json",
                success: function (data) {
                    if (data.state) {
                        if (isChange) {//有图片上传的
                            extData = {"typeId": "shop_id", "relateId": $("#auto-edit-shopId").val()};
                            $("#editAutoImg").fileinput("upload");
                        }
                        layer.msg(data.message, {icon: 1});
                        //关闭新增窗口
                        removeIframe();
                        merchantAutoManageFun.searchAction();
                    } else {
                        $("#store-edit-usernameSpan").text(data.message);
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //bootstrap验证
        bootstrapvalidatorForm: function () {
            $('#auto-form-member-edit').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    shopName: {
                        validators: {
                            notEmpty: {
                                message: '点位名称不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 100,
                                message: '点位名称长度必须在2到100位之间'
                            }
                        }
                    },
                    shopNo: {
                        validators: {
                            notEmpty: {
                                message: '点位编号不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '点位编号长度必须在2到20位之间'
                            }
                        }
                    },
                    shopAddr: {
                        validators: {
                            notEmpty: {
                                message: '点位地址不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 200,
                                message: '点位地址长度必须在2到200位之间'
                            }
                        }
                    },
                    shopPhone1: {
                        validators: {
                            notEmpty: {
                                message: '点位电话1不能为空'
                            },
                            regexp: {
                                regexp: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                                message: '点位电话1格式不正确'
                            }
                        }
                    },
                    shopPhone2: {
                        validators: {
                            regexp: {
                                regexp: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                                message: '点位电话2格式不正确'
                            }
                        }
                    },
                    shopPhone3: {
                        validators: {
                            regexp: {
                                regexp: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                                message: '点位电话3格式不正确'
                            }
                        }
                    },
                    longitude: {
                        validators: {
                            notEmpty: {
                                message: '经度不能为空'
                            },
                            regexp: {
                                regexp: /^-?((0|[1-9]\d?|1[1-7]\d)(\.\d{1,6})?|180(\.0{1,6})?)?$/,
                                message: '经度格式不正确'
                            }
                        }
                    },
                    latitude: {
                        validators: {
                            notEmpty: {
                                message: '纬度不能为空'
                            },
                            regexp: {
                                regexp: /^-?((0|[1-8]\d?)(\.\d{1,6})?|90(\.0{1,6})?)?$/,
                                message: '纬度格式不正确'
                            }
                        }
                    },
                    shopDesc: {
                        validators: {
                            notEmpty: {
                                message: '点位描述不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 500,
                                message: '点位描述长度必须在6到500位之间'
                            }
                        }
                    }
                }
            });
        }

    };

    var extData;
    var isChange;

    merchantAutoManageEditFun.init();
</script>
</body>
</html>